<template>
  <div class="title">操作页面</div>
  <div class="nav-div">
    <div class="navCode">编码</div>
    <div class="navColor">颜色</div>
    <div class="navColor">销售</div>
    <div class="navView">正反面图</div>
    <div> <img src="@/assets/佛吉亚下拉框.png" class="navImg" @click="open"></div>
  </div>

  <div v-if="isAlert === true" class="popup">
    <div class="popup-content">
      <div @click="close" class="close-div">×</div>
      <div class="popup-title">权限验证</div>
      <div class="horizontal-line" > </div>
      <div style="text-align: center;">
        <input placeholder="输入密码"  class="input-div">
      </div>
      <div style="text-align: center;">
        <button class="permission-button" @click="router.push('/setting')">验证</button>
      </div>
    </div>
  </div>

  <div class="body">
    <div class="check-div">
      <div class="check-title">正面检测</div>
      <div class="checkList">
        <div class="check-box"></div>
        <div>卡条检测</div>
      </div>
      <div class="checkList">
        <div class="check-box"></div>
        <div>纽扣检测</div>
      </div>
      <div class="checkList">
        <div class="check-box"></div>
        <div>刺毛条检测</div>
      </div>
      <div class="checkList">
        <div class="check-box"></div>
        <div>无纺布检测</div>
      </div>
      <div class="checkList">
        <div class="check-box"></div>
        <div>其他检测</div>
      </div>
      <div class="check-title">反面检测</div>
      <div class="checkList">
        <div class="check-box"></div>
        <div>卡条检测</div>
      </div>
      <div class="checkList">
        <div class="check-box"></div>
        <div>纽扣检测</div>
      </div>
      <div class="checkList">
        <div class="check-box"></div>
        <div>刺毛条检测</div>
      </div>
      <div class="checkList">
        <div class="check-box"></div>
        <div>无纺布检测</div>
      </div>
      <div class="checkList">
        <div class="check-box"></div>
        <div>其他检测</div>
      </div>
    </div>
    <div>
      <div class="top-left">L</div>
      <div class="top-right">⅃</div>
      <img src="@/assets/工程图.png" class="checkImg">
      <div class="bottom-left">⅃</div>
      <div class="bottom-right">L</div>
    </div>

  </div>
</template>
<script setup>
import router from '@/router/index';
import { alertData } from './home';
const { isAlert, open, close } = alertData();
</script>
<style scoped>
@import '../home/home.scss'
</style>